<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app" style="text-align: center; ">
    <table border="1" style="margin:auto; width:450px;">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>sal</th>
            <th>操作</th>
        </tr>
        <tr v-for='item in empList'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sal}}</td>
            <td>
                <a href="" @click.prevent='deleteEmp(item.id)'>删除</a>
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            empList: []
        },
        methods:{
            deleteEmp(p) {
                axios.delete(
                    '/emp/emps',{params:{id:p}}
                ).then(result=>{
                        if (result.data.success) {
                            axios.get(
                                '/emp/emps'
                            ).then(rs => {
                                this.empList = rs.data.data;
                            });
                        }
                    }
                );
            }
        },
        mounted(){
            axios.get(
                '/emp/emps'
            ).then(rs => {
                if(rs.data.success){
                    this.empList = rs.data.data;
                }
            });
        }
    });
</script>
</body>
</html>